<template>
	<view class="p12">
		<view class="">
			<u-tabs bar-width="120" active-color="#70B52C" :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view>
			<view class="u-flex u-f-jsb bm pt16 pb16" v-for="(item,index) in dataList" :key="index">
				<view>
					<view class="fz14">购物金充值</view>
					<view class="fz12 c9 mt4">充值时间：2024-07-15 14:00</view>
				</view>
				<view style="color: #70B52C;" class="fz20">+120.00</view>
			</view>
			
			
			<view class="">
			
				<u-loadmore :status="loadStatus" v-if="dataList.length>0" />
			</view>
			<view class="order-none u-flex u-f-justify fz16 c9 p50" v-if="dataList.length<=0">
				暂无数据！
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '收入'
				}, {
					name: '支出'
				}],
				current: 0,
				dataList:[],
				loadStatus: 'more',
				scrollHeight: 300,
				page: 1,
			};
		},
		onLoad() {
			
			this.initData()
			
		},
		onShow() {},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			change(e) {
				this.current = e
				this.initData()

			},
			initData() {
				this.page = 1
				this.dataList = []
				this.getData()

			},
			getData() {
				this.$api.walletTransactionList({
					pageNo: this.page,
					pageSize: 10,
					type:this.current+1
					
				}, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.module-card {
		background: url('https://diy.cdevelopment.cn/admin-api/infra/file/18/get/502a61a86bd6abe6545de8c5170f4bfc162d0b1993ddf1e96622e876df8eeb7e.png') no-repeat center;
		background-size: contain;
		width: 702rpx;
		height: 280rpx;
		margin: 0 auto;
	}

	.item {
		width: 33.33%;
		min-width: 33.33%;
		max-width: 33.33%;
		padding: 0 12rpx;
		margin-bottom: 30rpx;

		.item-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 120rpx;
			background: #F4F4F4;
			border-radius: 15rpx;
			text-align: center;
		}

		&.on {
			.item-content {
				background: rgba(112, 181, 44, 0.1);
				border: 1px solid #70B52C;
				color: #70B52C;

				.c9 {
					color: #70B52C !important;

				}
			}
		}

	}

	.loginbtn {
		font-size: 28rpx;
		background: linear-gradient(99deg, #00ACEB 0%, #4AC7F1 91%);
		color: #fff;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 50rpx;
		// box-shadow: 0 5px 7px 0 #0CA43C;
	}
</style>